<template>
  <demoBlock title="多列选择" padding>
    <vcu-picker
      title="标题"
      :columns="columns"
      @confirm="onConfirm"
      @cancel="onCancel"
      @change="onChange"
    />
  </demoBlock>
</template>

<script>
import { defineComponent, ref } from "vue";

export default defineComponent({
  setup() {
    const columns = [
      // 第一列
      {
        values: ["周一", "周二", "周三", "周四", "周五"],
        defaultIndex: 2,
      },
      // 第二列
      {
        values: ["上午", "下午", "晚上"],
        defaultIndex: 1,
      },
    ];

    const onConfirm = (value, index) => {
      console.info(`当前值: ${value}, 当前索引: ${index}`);
    };
    const onChange = (value, index) => {
      console.info(`当前值: ${value}, 当前索引: ${index}`);
    };
    const onCancel = () => console.info("取消");

    return {
      columns,
      onChange,
      onCancel,
      onConfirm,
    };
  },
});
</script>
